<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>heatmap.js Realtime heatmap based on mousemovement</title>
		<meta name="robots" content="index, follow" />
		<meta name="description" content="Realtime heatmap based on mouse movement " />
		<meta name="author" content="Patrick Wied" />
		<meta name="keywords" content="heatmap, realtime, mouse movement, javascript, canvas, html5" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			body, html {
				margin:0;
				padding:0;
				font-family:Arial;
			}
			h1 {
				margin-bottom:10px;
			}
			#main {
				position:relative;
				width:940px;
				padding:20px;
				margin:auto;
			}
			#heatmapArea {
				position:relative;
				float:left;
				width:600px;
				height:400px;
				background-image:url(http://www.patrick-wied.at/static/heatmapjs/demo/realtime_heatmap/graphic.png);
				border:1px dashed black;
			}
			#configArea {
				position:relative;
				float:left;
				width:260px;
				padding:20px;
			}
		</style>
		<link rel="shortcut icon" type="image/png" href="http://www.patrick-wied.at/img/favicon.png" />
	</head>
	<body>
		<div id="main">
			<h1>Realtime heatmap based on mouse movement</h1>
			<a href="http://www.patrick-wied.at/static/heatmapjs/" title="heatmap.js">Back to the project page</a><br /><br />
			<div id="heatmapArea">
			
			</div>
			<div id="configArea">
				<h2>Sidenotes</h2>
				This is a demonstration of a realtime heatmap based on the user's mouse movement.<br /><br />
				<strong>Note: if you want to see the dynamic repainting, stop your cursor on the heatmap for some time.</strong>
			</div>
			<div style="position:absolute;width:940px;top:550px;text-align:center;"><a href="http://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> by <a href="http://www.patrick-wied.at" target="_blank">Patrick Wied</a></div>
		</div>
		
		<script type="text/javascript" src="../../src/heatmap.js"></script>
		<script type="text/javascript">

		window.onload = function(){
		
		var xx = h337.create({"element":document.getElementById("heatmapArea"), "radius":25, "visible":true});
		
			(function(){
				var active = false,
				lastCoords = [],
				mouseMove = false,
				mouseOver = false,
				activate = function(){
					active = true;
				},
				$ = function(id){
					return document.getElementById(id);
				},
				timer = null,
				simulateEv = function(){
					xx.store.addDataPoint(lastCoords[0], lastCoords[1]);
				},
				antiIdle = function(){
					if(mouseOver && !mouseMove && lastCoords && !timer){
						timer = setInterval(simulateEv, 1000);			
					}
				};
				
				
				(function(fn){
					setInterval(fn, 1000);
				}(antiIdle));
				var tmp = $("heatmapArea");

				tmp.onmouseout = function(){
					mouseOver = false;
					if(timer){
						clearInterval(timer)
						timer = null;
					}
				};
				
				
				tmp.onmousemove = tmp.onclick = function(ev){
					mouseMove = true;
					mouseOver = true;
					if(active){
						if(timer){
							clearInterval(timer);
							timer = null;
						}
						
						var pos = h337.util.mousePosition(ev);
						
							xx.store.addDataPoint(pos[0], pos[1]);
							lastCoords = [pos[0], pos[1]];
						
						active = false;
					}
					mouseMove = false;
				};
				tmp["ontouchmove"] = function(ev){  
							var touch = ev.touches[0],  
							// simulating a mousemove event           
							simulatedEvent = document.createEvent("MouseEvent");  
							simulatedEvent.initMouseEvent("mousemove", true, true, window, 1,  
										  touch.screenX, touch.screenY,  
										  touch.clientX, touch.clientY, false,  
										  false, false, false, 0, null);  
							// dispatching the simulated event              
							touch.target.dispatchEvent(simulatedEvent);  
							// we don't want to have the default iphone scrolling behaviour ontouchmove  
							ev.preventDefault();  
						};  
				
				
				(function(fn){
					setInterval(fn, 50);
				}(activate));
			})();
		};
		</script>

	</body>
</html>
